<template>
	<div class="container">
		<view class="top">
			<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/779d46d3-58b6-4342-b7b3-080bcfce163e.png" mode="aspectFill"></image>
			<image class="titleImg" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ed00832a-1991-4bc0-9e08-b3a953681a5d.png" mode="aspectFill"></image>
			<image class="subTitle" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/9a9e22c7-908b-4801-bf1c-19445cc67894.png" mode="aspectFill"></image>
			<view class="title_text">海量福分奖励享不停</view>
				<image  class="submitImg" @click="participateActivity" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/4c3db00b-c4a3-4d83-9de9-60c33fb91972.png" mode=""></image>
				<view class="participate" @click="participateActivity" >一键参与活动</view>
			<view class="activityBall" v-if="showGood">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d9ac735d-abfa-4f7d-a2c2-5d4f2d28f312.png" mode=""></image>
					<view class="goodOne">恭喜获得</view>
					<view class="goodThree">{{awardPrice}}福分</view>
					<image @click="showGood = false"  class="confirmImg" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/1032998b-9f3a-4428-85fa-80618caf081e.png" mode=""></image>
			</view>
		</view>
		<view class="bottom">
			<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b98f0d15-d88e-4bee-be1c-0b8534306c3b.png" mode="aspectFill"></image>
			<view class="bottom_border">
			</view>
		</view>
		<!-- 授权登录弹窗 -->
		<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
	</div>
	
	
	
</template>
<script setup>
	import {$activityTakePartIn,$scoreRecordSave} from '@/http/apiManager.js'
	import { ref,reactive,getCurrentInstance } from 'vue';
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import storageManage from '@/util/storageManage.js'
	const showGood = ref(false)
	const gzLoginPopupRef = ref()
	const vdata = reactive({
		isLogin: false, // 用户是否登录
		fansInfo: {}, // 用户详情
		activityId: '', // 活动id
		activityDetail: {}, // 活动详情
	})
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	onLoad(async ({activityId,activityDetail,date,periodType,activityChannelId}) => {
		vdata.isLogin = storageManage.isLogin()
		vdata.activityId = activityId
		vdata.activityDetail = JSON.parse(decodeURIComponent(activityDetail))
		vdata.activityChannelId = activityChannelId
		// 判断活动是否过期
		if (vdata.activityDetail.state !== 4) {
			$infoBox.toast('当前活动已下线，正在返回首页！', {
				duration: 2000,
				mask: true
			})
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 2000)
			return
		}
		// 判断用户是否登录过
		if (!vdata.isLogin) {
			// 加载弹窗打开
			// uni.showLoading({
			// 	title: '加载中...',
			// 	mask: true
			// })
			// await getActivityAwards(false) // 获取奖品列表
			uni.showModal({
				title: '提示',
				content: '请先进行登录注册，再进行参与！',
				success({
					cancel
				}) {
					if (cancel) {
						$infoBox.toast('登录失败，无法正常参与活动！')
						// vdata.errorReason = '1、登录失败，无法正常参与活动！'
					} else {
						gzLoginPopupRef.value.open() // 打开授权弹框
					}
				}
			})
			return
		}
		// 如果用户登陆过
	})
	
	/**
	 * 登录回调
	 */
	function isLoginCallback(){
		if(!vdata.isLogin){
			$infoBox.toast('登录失败，无法正常参与活动！')
			// vdata.errorReason = '1、登录失败，无法正常参与活动！'
		}
	}
	
			const awardPrice = ref()
			// 领取奖励
			const  participateActivity  = ()=>{
	
			uni.showLoading({
				title: '加载中'
			})
		 $activityTakePartIn({
			activityId:vdata.activityId,
			activityTemplateNo:vdata.activityDetail.activityTemplateNo,
			activityChannelId:vdata.activityChannelId
		}).then((res)=>{
			uni.hideLoading()
			awardPrice.value = res.bizData.awardPrice
			showGood.value = true
		})
		
		}
</script>

<style scoped lang="less">
	.container{
		width: 100%;
		height: 100vh;
		  display: flex;          /* 启用弹性布局 */
		  flex-direction: column; /* 垂直排列子元素 */
	}
	
	.top{
		width: 100%;
		height: 778rpx;
		position: relative;
		.titleImg{
			position: absolute;
			left: 106rpx;
			top: 70rpx;
			width: 538rpx;
			height: 150rpx;
		}
		.subTitle{
			position: absolute;
			top: 240rpx;
			left: 100rpx;
			width: 550rpx;
			height: 80rpx;
		}
		.title_text{
			position: absolute;
			top: 240rpx;
			left: 100rpx;
			width: 550rpx;
			height: 80rpx;
			color: #F8301E;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			font-weight: bold;
			  letter-spacing: 10rpx;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.submitImg{
			position: absolute;
			top: 680rpx;
			left: 80rpx;
			width: 600rpx;
			height: 100rpx;
		}
		.participate{
			position: absolute;
			top: 705rpx;
			left: 280rpx;
			color: white;
			font-weight: bold;
			font-size: 32rpx;
		}
		.activityBall{
			position: absolute;
		    top: 200rpx;
		    left: 50rpx;
		    width: 650rpx;
		    height: 750rpx;
		    z-index: 99999;
			image{
				width: 100%;
				height: 100%;
			}
			.goodOne{
			    position: absolute;
			    top: 245rpx;
			    left: 190rpx;
			    font-size: 62rpx;
				 letter-spacing: 10rpx;
			    font-weight: bold;
				color: #FFA62E;
			}
			.goodThree{
			    position: absolute;
			    top: 360rpx;
			    left: 210rpx;
			    font-size: 62rpx;
				 letter-spacing: 10rpx;
			    font-weight: bold;
				color: #FFA62E;
			}
			.confirmImg{
				position: absolute;
				top: 600rpx;
				    left: 150rpx;
				    width: 350rpx;
				    height: 110rpx;
			}
		}
	}
	.bottom{
		width: 100%;
		 flex: 1;   
		 position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		.bottom_border{
			width: 686rpx;
			height: 520rpx;
			background: #FFF6E5;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(222,28,0,0.53), 0rpx 10rpx 16rpx 0rpx #FFF5E6;
			border-radius: 20rpx;
			position: absolute;
			top: 40rpx;
			left: 30rpx;
		}
	}
</style>

